import './index.scss'
import { Form, Button, Col, Row, Image, Descriptions, Tag, DatePicker, TimePicker, Radio } from 'antd'
import { ScheduleOutlined } from '@ant-design/icons'
import { useEffect, useState } from 'react'
import { useStore } from '@/store'
import { useNavigate } from 'react-router-dom'
function Shop () {
  const [visible, setVisible] = useState(false)
  const navigate = useNavigate()
  const { ReservationStore } = useStore()
  const plainOptions = [
    {
      label: '大厅',
      value: '4',
    },
    {
      label: '5-10人包厢',
      value: '10',
    },
    {
      label: '10-15人包厢',
      value: '15',
    },
  ]
  const onFinish = async (values) => {
    const arrivalDate = values['date-picker'].format('YYYY-MM-DD')
    const arrivalTime = values['time-picker'].format('HH:mm:ss')
    const tableSize = values.tableSize.toString()
    const res = await ReservationStore.createReservation(arrivalDate, arrivalTime, tableSize)
    if (res) {
      navigate('/', { replace: true })
    }
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  useEffect(() => {

  })
  return (
    <div className='shopPage'>
      <Row>
        <Col span={10}>
          <Image
            preview={{ visible: false }}
            width={600}
            src="https://www.hilton.com.cn/file/images/20181122/20181122222651373pZRa6v0_thum_mid.jpg"
            onClick={() => setVisible(true)}

          />
          <div style={{ display: 'none' }}>
            <Image.PreviewGroup preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }}>
              <Image src="https://img.meituan.net/msmerchant/93be7baa513a532264ee9ba8ec583dd6_1_b8eb8f1aa8e3ef7a_1_pnyX17J%2F7AHeFE4VaTnjXLNGl8gZuA6GiwbJBqq7DSi5dO1i8%2BOso7JWXnYAezzgas4sMdUzGN%2FGEGkDeNVPB%2F7TBU4oPhDVe%2BN5pUXUle%2BE6up%2BZc9adjvmXA3eBPKu7mSA3504XneiKgf0YGptwQ%3D%3D" />
              <Image src="https://img.meituan.net/msmerchant/4f8bbaca3ad175ffe47f0059f39ee58b_1_b8eb8f1aa8e3ef7a_1_RLzhMKjnuXUh39iVgLZLYS94yGqvBD3aKy41U8mjprekE3sSH93uu2XJoUcFTpUu8an0eg0AQouf%2Fen%2BiDliu79WCJOnp%2FFweld%2Fr7w3lsdamzkB2evhL9XYtFICGUT9MncxjWYhH7YsH5XY%2F%2F%2F8kw%3D%3D" />
              <Image src="https://img.meituan.net/msmerchant/f0658e3715bdefe9138845c14a5ddbc9_1_b8eb8f1aa8e3ef7a_1_l4bUSFOfpLjRW0giYMsjmLsRrYWgucEKjxDUZGpQmKHAilv8gez89J0imY2djrqGc0NMd0j04WUHfo22UsuVc2%2BHFOCwBmaG0WvTT9mxxSxn16Y1Lyv0bmzL2yP6oGeIBBwjHvjk0uoT3VU%2FN1Wzog%3D%3D" />
              <Image src="https://img.meituan.net/msmerchant/23716e9a18e0c2775ec8eab5ef44528a_1_b8eb8f1aa8e3ef7a_1_cyIrJBxDARIa0GVqm5X0VDsnPECwTQRXhUO%2BJKoBAqpdL5E1mFjKi5vA6M%2FVQGYJfR2gpkCOEollNxKUxL9vnS1ieWfERTZ0YsHwnZrL0fUIZ%2F8y3Uqb7tx96h8%2BmbiZ3WdnWdHizVy1udNaRBLDaA%3D%3D" />
              <Image src="https://img.meituan.net/msmerchant/622a91c52be07718b88a4dc7bc33dac0_1_b8eb8f1aa8e3ef7a_1_lnbfpG3092dX8nTB7%2BefZoZzjIldKYYJfGcDqoP3C%2F%2BKyqHsmID8tcpfuFaHNIsgwRrOn6NiBleJDok%2BGfownqOtGFKPwml1fJLtffJUyuiAra2lXFzhr%2BYgHbIRBwLb8n27G2HqQzGpXMQowVkNug%3D%3D" />
              <Image src="https://img.meituan.net/msmerchant/8f1e6c227c4a2e63d5be2407b8f1b8ed_1_b8eb8f1aa8e3ef7a_1_iBSc7zhrUzAp4zEO2x%2FQs2zM21mjGcudorMSJinoqW8z7LqttRAsyDHEWCQxkW0ZFsrYbSUKUPulLjyxdq69sYRqzRjBeW%2BTly7QrgpBZm5T1rqZKHSF9h68v7Q5Q6Mjzc3%2BwYDLMaoX6CJFvwq3lQ%3D%3D" />
            </Image.PreviewGroup>
          </div>
        </Col>
        <Col span={14}>
          <Descriptions
            bordered
            column={2}
            title="祥源希尔顿酒店·嘉宴中餐厅"
            labelStyle={{
              width: 150,
              textAlign: 'center',
              color: 'black'
            }}
          // extra={<Button type="primary">Edit</Button>}
          >
            <Descriptions.Item label="口味">5.0 ⭐️</Descriptions.Item>
            <Descriptions.Item label="环境">5.0 ⭐️</Descriptions.Item>
            <Descriptions.Item label="服务">5.0 ⭐️</Descriptions.Item>
            <Descriptions.Item label="电话">18917280029</Descriptions.Item>
            <Descriptions.Item label="人均">300-500元</Descriptions.Item>
            <Descriptions.Item label="标签">
              <Tag color="green">闵行区</Tag>
              <Tag color="green">中餐</Tag>
              <Tag color="green">商务聚会</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="地址及营业时间">
              <div style={{ textAlign: 'left' }} >
                地址：上海市闵行区红松东路1116号虹桥祥源希尔顿酒店2号楼1楼(近虹许路) <br />
                营业时间：周一至周日 11:00-14:00 16:00-21:30
              </div>
            </Descriptions.Item>
          </Descriptions>
          <Form
            name="basic"
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 8, offset: 1 }}
            style={{ width: 600, textAlign: 'left', marginTop: 20 }}
            initialValues={{
              date: '2023-03-16',
              time: '19:00:00',
              tableSize: '4'
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="到店日期"
              name="date-picker"
              rules={[
                {
                  type: 'object',
                  required: true,
                  message: 'Please select date!',
                },
              ]}
            >
              <DatePicker />
            </Form.Item>

            <Form.Item
              label="到店时间"
              name="time-picker"
              rules={[
                {
                  type: 'object',
                  required: true,
                  message: 'Please select time!',
                },
              ]}
            >
              <TimePicker />
            </Form.Item>
            <Form.Item
              wrapperCol={{ span: 14, offset: 1 }}
              label="餐位"
              name="tableSize"
              rules={[{ required: true, message: 'Please check table size' }]}
            >
              <Radio.Group options={plainOptions} />
            </Form.Item>
            <Form.Item>
              <Button htmlType="submit" type="primary"><ScheduleOutlined />立即预订</Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </div >
  )
}
export default Shop